<!--   @author  Created By  YS  on 2023/10/22 -->
<!--   @describe vip简介-->

<template>
<div>
  <div class="vip-title-text">
    VIP尊享特权
  </div>
  <vipCard card-type="normal"></vipCard>

  <div class="mt65">
    <u-scroll-list :indicator="false">
      <!--        <view v-for="(item, index) in list" :key="index">-->
      <!--          <image :src="item.thumb"></image>-->
      <template v-for="(item, index) in list" >
        <div class="vip-li" @click="active(index)" :class="{'active':item.active}">
          <div class="vip-li-year">连续包年</div>
          <div class="vip-li-money">￥{{item.money}}</div>
          <div class="vip-li-re-money">360元</div>
          <div class="vip-li-pay">折合20.3元/月</div>
        </div>
      </template>

    </u-scroll-list>
  </div>
  <div class="mt65">
    <u-cell-group  :border="false">
      <u-cell  :border="false" title="支付方式" :isLink="true" value="微信">
        <div slot="value">
		  <image class="pay-img" src="../../../static/my/wechat.png" mode=""></image>
          <!-- <img class="pay-img" src="../../../assets/icon/user-filling.png" alt=""> -->
          <text class="u-slot-value">微信</text>
        </div>

      </u-cell>
    </u-cell-group>
  </div>

  <div class="mt65">
    <cBtn text="立即开通" @click="handlePay"></cBtn>
  </div>

  <div class="flex-row agreement">
    <u-checkbox-group
        v-model="checkboxValue1"
        placement="column"
        shape="circle"
        @change="radioChange"
    >
      <u-checkbox
          v-for="(item, index) in radiolist1"
          :key="index"
          :label="item.name"
          :name="item.value"
      >
      </u-checkbox>
    </u-checkbox-group>
    成为会员即表示同意《自动续费协议》及《隐私政策》
  </div>
</div>
</template>

<script>
import cBtn from "../../../components/cBtn"
import vipCard from "./vipCard"
export default {
  name: 'vipPage',
  components: {
    vipCard,
    cBtn
  },
  data() {
    return {

      list: [{
        active:true,
        thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
        money: "388"
      }, {
        active:false,
        money: "88",
        thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
      }, {
        active:false,
        money:'30',
        thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
      }],
      radiolist1: [{
        disabled: false,
        name:'',
        value:'选中'
      },
      ],
      show: false,
      title:'支付宝',
      payList: [
        {
          name:'支付宝'
        },
        {
          name: '微信'
        }
      ],
      checkboxValue1:"",
      showPopup:true
    }
  },
  methods: {
    radioChange(e) {
      console.log(e)
    },
    openPay(){
      this.show = true;
    },
    close(){
      this.show = false;
    },
    closePopUp(){
      this.showPopup = false;
    },
    openPopup(){
      this.showPopup = true;
    },
    active(index){
      this.list.forEach(item=>{
        item.active = false;
      })
      this.list[index].active =  true
    },
    handlePay(){
      if(this.checkboxValue1 == ''){
        uni.showToast({
          title: '请同意协议',
          icon: 'none',
          duration: 2000
        });
        return;
      }
    }
  }
}
</script>

<style lang='scss' scoped>
@import "../../../assets/css/base.scss";
.vip-li{
  width: 224rpx;
  height: 298rpx;
  box-sizing: border-box;
  display: flex;
  border:10rpx solid #999999;
  border-radius: 20rpx;
  flex-direction: column;
  //justify-content: ;
  align-items: center;
  //padding: 20rpx 0;
  margin-left: 20rpx;
  background: #999999;

  //border-bottom: 1rpx solid $uni-border-color;
  //div{
  //  background: #fff;
  //  width: 100%;
  //}
  .vip-li-year{
    width: 100%;
    background: #fff;
    height: 50rpx;
    opacity: 1;
    color: #333333;
    text-align: center;
    font-size: 36rpx;
    font-weight: 0;
    line-height: 43rpx;
    letter-spacing: 1.33rpx;
    padding-top:30rpx;
  }
  .vip-li-money{
    width: 100%;
    background: #fff;
    height: 100rpx;
    opacity: 1;
    color: #fa6400;
    text-align: left;
    font-size: 72rpx;
    font-weight: 0;
    line-height: 86rpx;
    letter-spacing: -2.66rpx;
    text-align: center;
  }
  .vip-li-re-money{
    width: 100%;
    background: #fff;
    height: 50rpx;
    opacity: 1;
    color: #999999;
    text-align: center;
    font-size: 36rpx;
    font-weight: 0;
    line-height: 43rpx;
    letter-spacing: -1.33rpx;
    text-decoration:line-through
  }
  .vip-li-pay{
    color: #fff;
    width: 175rpx;
    height: 40rpx;
    opacity: 0.8;
    text-align: center;
    font-size: 28rpx;
    font-weight: 0;
    line-height: 34rpx;
    letter-spacing: -1.03rpx;
    margin-top: 10rpx;
  }
}

.active{
  background: #7355FF;
  border:10rpx solid #7355FF;
  .vip-li-pay{
    //background-color:#999999;
    color: #fff;
  }
}
.pay-img{
  width: 25rpx;
  height: 25rpx;
}
.agreement{
  font-size: 24rpx;
  color:#999999;
  justify-content: center;
  margin-top: 65rpx;
  margin-bottom: 40rpx;
  span{
    color: #7355ff;
    cursor: pointer;
  }
}
.mt65{
  margin-top: 65rpx;
}

.vip-title-text {
  width: 750rpx;
  height: 100rpx;
  line-height: 100rpx;
  opacity: 1;
  color: #000000;
  text-align: left;
  font-size: 36rpx;
  font-weight: 0;
  padding-left: 40rpx;
}
</style>
